<template>
  <el-menu-item-group class="menu-group">
    <span
      class="group-title"
      slot="title"
    >{{ menu_data.groupTitle }}</span>
    <!-- 如果菜单数据中的子菜单不为空 -->
    <template v-if="menu_data.submenus && menu_data.submenus.length>0">
      <auto-submenu :subMenuData="menu_data.submenus"></auto-submenu>
    </template>
    <template v-if="menu_data.items && menu_data.items.length > 0">
      <template v-for="item of menu_data.items">
        <el-menu-item
          class="item-class"
          :index="item.index"
        >
          <!-- <i class="el-icon-menu"></i> -->
          <!-- <i style="width:1.5rem;" v-if="item.icon === ''" ></i> -->
          <img
            style="width:1.5rem;"
            :src="require('@/assets/icons/small/' + item.icon + '.png')"
          />
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu-item-group>
</template>
<script>
import AutoSubmenu from '@/pages/home/components/AutoSubmenu'
export default {
  components: {
    AutoSubmenu
  },
  name: 'AutoMenu',
  props: ['groupMenuData'],
  data () {
    return {
      menu_data: this.groupMenuData
    }
  },
  mounted () {
    // console.log(this.menu_data)
  }, methods: {

  }
}
</script>
<style scoped>
.menu-group {
  padding-left: 0px;
}
.menu-group /deep/ .el-menu-item-group__title {
  padding-left: 3px !important;
}
.group-title {
  font-size: 1.2rem;
  color: #69dda6;
  font-family: "Hiragino Sans GB";
  /* 让鼠标不能选中 */
  user-select: none;
}
.item-class {
  /* font-size: 13px; */
  color: #6a6a6a;
  /* height: 30px; */
  font-family: "Hiragino Sans GB";
  /* 让鼠标不能选中 */
  user-select: none;
}
.item-class:hover {
  color: #6a6a6a;
  background-color: #ebfaf4;
}
/* .item-class:active {
  background-color: #69dda6;
} */
</style>
